<template>
	<view class="group">
		<view class="group-item" v-for="(item,index) in tableData" :key="index" v-if="tableData.length>0">
			<view class="item-top-box">
				<view class="m" style="width:100%;text-align: left;">
					<view class="label sp">
						第 {{++index}} 名
					</view>
					<text class="content">{{item.team_name }}</text>
					<text class="label" style="color:#999;font-size: 12px;">({{item.userNumber }})</text>
				</view>
				<view class="m">
					<text class="label ">
						平均总分:
					</text>
					<text class="content">{{item.average_sum }}</text>
				</view>
				<view class="m" style="margin: 0;font-weight: normal;font-size: 14px;">
					<text class="label">
						团队业绩:
					</text>
					<text class="content">{{item.profit_sum }}</text>
				</view>
				<view class="m">
					<text class="label wm">
						师傅平均分:
					</text>
					<text class="content">{{item.average_sum_trainee1 }}</text>
				</view>
				<view class="m">
					<text class="label wm">
						学徒平均分:
					</text>
					<text class="content">{{item.average_sum_trainee2 }}</text>
				</view>

			</view>
			<view class="item-bottom-box">
				<view class="bottom-item" v-for="(item2,index) in columns" :key="index">
					<view class="mLeft">
						{{item2.text}}
					</view>
					<view class="mRight">
						<view class="content">
							师傅:{{getFiexd(item.IntegralItem.trainee1[item2.name])}}
						</view>
						<view class="content">
							学徒:{{getFiexd(item.IntegralItem.trainee2[item2.name]) }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty icon="http://cdn.uviewui.com/uview/empty/data.png" v-else></u-empty>
	</view>
</template>

<script>
	export default {
		props: {
			columns: {
				type: Array,
				default: () => []
			},
			tableData: {
				type: Array,
				default: () => []
			},
		},
		methods: {
			getFiexd(value) {
				return Number(value).toFixed(2)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.group {
		padding: 0 35rpx;

		&-item {
			padding: 35rpx 0;
			border-bottom: 5px solid #ddd;

			.item-top-box {
				display: flex;
				flex-wrap: wrap;
				font-size: 14px;

				.m {
					width: 50%;
					margin-bottom: 25rpx;

					&:nth-child(2n+1) {
						text-align: right;
					}

					.label {
						color: #999;
						font-weight: 600;
					}

					.sp {
						background-color: #fdbf29;
						color: #fff;
						display: inline;
						padding: 10rpx 16rpx;
						border-radius: 6rpx;
					}

					.content {
						margin-left: 0rpx;
						font-weight: 600;
						color: #333;
						font-size: 14px;
					}
				}
			}

			.item-bottom-box {
				.bottom-item {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 12px;
					margin-bottom: 10rpx;

					.mLeft {
						width: 120rpx;
						text-align: left;
						font-size: 14px;
						line-height: 60rpx;
					}

					.mRight {
						flex: 1;
						text-align: center;

						.content {
							&:first-child {
								background-color: #fdbf29;
								color: #f00;
							}

							&:last-child {
								text-align: center;
								background-color: #fdde92;
								color: green;
							}
						}
					}
				}
			}
		}

		.wm {
			position: relative;
			padding-left: 26rpx;

			&:before {
				content: "";
				position: absolute;
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				top: 12rpx;
				left: 0rpx;
				background-color: #fdde92;
			}
		}
	}
</style>